import React from 'react'
import { View, Text } from '@tarojs/components'
import Avatar from '@COMPONENTS/User/Avatar'
import '../style/withLeftMessage.scss'

const withLeftMessage = WrappedComponent => {
  const withLeftMessageComponent = props => {
    const { isShowAvatar, message, onClickAvatar, language } = props
    const { user = {} } = message || {}
    const { extension, displayName } = user

    return (
      <View className={`left-msg-container${isShowAvatar ? '' : ' left-msg-mgTop12'}`}>
        <Avatar
          data={user}
          onClickAvatar={onClickAvatar}
          avatarKey="avatar"
          avatarSuffix={extension}
          isTransparent={!isShowAvatar}
        />
        <View className="left-msg-right-container">
          {isShowAvatar && <Text className="left-msg-username">{displayName?.[language]}</Text>}
          <WrappedComponent {...props} />
        </View>
      </View>
    )
  }
  return withLeftMessageComponent
}

export default withLeftMessage
